{% extends "forum/forum_home.html" %}
{% block page_link %}

{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .data_num {
            display: inline-block;
            color: #0b0b0b;
        }

        .forum_title a:link {
            color: blue;
        }

        /*.forum_title a:visited {*/
        /*    color:red;*/
        /*}*/
        .forum_title a:hover {
            text-decoration: underline;
        }

        .forum_title a {
            font-size: 18px;

        }

        .jjj {
            color: red;
        }

        #div a:hover {
            text-decoration: underline;
        }
        ul li {
            list-style: none;
        }

    </style>
{% endblock %}

{% block right_content %}
    <!--帖子列表模块-->
    <div style="padding: 3px 10px 3px 20px; border-bottom: #a6a9ad solid 1px; width: 100%; position: fixed; background: #e8edf4">
        <div id="all_posts" style="display: inline-block; cursor: pointer;line-height: 38px"><a
                href="forum_home">首页</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_posts" style="display: inline-block; cursor: pointer;"><a class="jjj"
                                                                              href="forum_release_view">我的发帖</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_likes" style="display: inline-block; cursor: pointer;"><a
                href="forum_like_view">我的点赞</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_collect" style="display: inline-block; cursor: pointer;">
            <a href="forum_collection_view">我的收藏</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="competitive_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_competitive_view">精品文章</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="popular_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_popular_view">热门文章</a></div>
    </div>
    <div id="affirm_the_choice"
         style="display: none; width: 300px; height: 200px; background: white; border-radius: 15px;position: absolute;z-index: 9999; top: 40%; left: 40%; padding: 5px">
        <div style="font-size: 25px; text-align: right; line-height: 25px; cursor: pointer; padding-right: 7px"
             onclick="xiaoshi()">×
        </div>

        <p style="margin:40px 0 45px 0; text-align: center">是否删除该条动态?</p>
        <div style="text-align: center">
            <button type="button" id="delete_botton"
                    style="border: none; width: 80px; height: 30px; background: #1E90FF; color: white; border-radius: 3px; margin-right: 5px">
                确定
            </button>
            <button type="button"
                    style="border: none; width: 80px; height: 30px; background: #1E90FF; color: white; border-radius: 3px; margin-left: 5px"
                    onclick="xiaoshi()">取消
            </button>
        </div>
    </div>

    <div style="height: 50px"></div>
    <div style="width:100%; height: auto;padding: 10px;">
        <ul>
            {% for obj in objs %}
                <li style="padding-top: 20px; border-bottom: dashed 1px grey;" onmousemove="on_this(this)"
                    onmouseout="out_this(this)">
                    <div class="forum_title" style="padding-left: 20px">
                        <a href="forum_details?id={{ obj.id }}"
                           style="color: #121212;font-weight: bold; ">{{ obj.title }}</a>
                        <div id="delete_posts" style="color: #1E90FF; float: right; cursor: pointer"
                             onclick="delete_post({{ obj.id }})">
                            删除
                        </div>
                    </div>
                    <div style="height: 75px;padding:0 20px 0 20px" id="article_body">
                        <p style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap: break-word;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content_text }}</p>
                    </div>
                    <div style="padding: 15px 15px 15px 20px">
                        <div style="display: inline-block; padding: 5px;line-height: 14px">
                            <div class="author_name" style="display: inline-block; color: #9195a3">
                                {{ obj.author.real_name }}
                            </div>
                            <div style="display: inline-block">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                            <div class="update_time" style="display: inline-block; color: #9195a3;font-size: 14px">
                                {{ obj.create_time | date:"Y-m-d H:i" }}
                            </div>
                        </div>
                        <div style="display: inline-block; width: 75%;"></div>
                        <div style="display: inline-block;">
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/未点赞.png" alt="" width="18px" height="18px">
                                <span>{{ obj.like_users.all.count }}</span>
                            </div>
                            <div class="data_num" style="width: auto;height: auto; padding: 6px">
                                <img src="../../static/forum/img/non_comment.png" alt="" width="18px" height="18px">
                                <span>{{ obj.articlecomment_set.all.count }}</span>
                            </div>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}
{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("main_page").className = "add-nav-active";
        };

        function on_this(this_is) {
            this_is.style.background = '#e3e3e3'
        }

        function out_this(this_is) {
            this_is.style.background = '#e8edf4'
        }

        function delete_post(post_id) {
            document.getElementById('affirm_the_choice').style.display = 'inline-block';
            document.getElementById("delete_botton").setAttribute("onclick", "affirm_delete(" + post_id + ")")

        }

        function xiaoshi() {
            document.getElementById('affirm_the_choice').style.display = 'none';
        }

        function affirm_delete(post_id) {
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/forum/forum_release_view");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("id=" + post_id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {

                            alert("删除成功！");
                            window.location.replace("/forum/forum_release_view")

                        } else {
                            alert(JsonDate['message'])
                        }
                    }
                }
            }
        }
    </script>
{% endblock %}